{% extends 'layout/mange.html'%}

{% block title %}{{ project.name }} - 项目详情{% endblock %}
{% block page_title %}{{ project.name }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="panel panel-default card shadow-sm">
        <div class="panel-heading">
            <h3 class="panel-title">{{ project.name }}</h3>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-8">
                    <p><strong>项目描述：</strong>{{ project.desc }}</p>
                </div>
                <div class="col-md-4 text-right">
                    <span class="badge" style="background-color: {% if project.color == 1 %}#56b8eb{% elif project.color == 2 %}#f28033{% elif project.color == 3 %}#ebc656{% elif project.color == 4 %}#a2d148{% elif project.color == 5 %}#20BFA4{% elif project.color == 6 %}#7461c2{% elif project.color == 7 %}#20bfa3{% else %}#1a73e8{% endif %};">项目ID: {{ project.id }}</span>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-6">
                    <div class="info-item mb-3">
                        <i class="fa fa-user-circle text-primary mr-2"></i><strong>创建者：</strong>{{ project.creator.username }}
                    </div>
                    <div class="info-item mb-3">
                        <i class="fa fa-calendar text-primary mr-2"></i><strong>创建时间：</strong>{{ project.create_datetime }}
                    </div>
                    <div class="info-item mb-3">
                        <i class="fa fa-users text-primary mr-2"></i><strong>参与人数：</strong>{{ project.join_count }}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="info-item mb-3">
                        <i class="fa fa-hdd-o text-primary mr-2"></i><strong>已使用空间：</strong>{{ project.use_space }} 字节
                    </div>
                    <div class="info-item mb-3">
                        <i class="fa fa-server text-primary mr-2"></i><strong>COS桶：</strong>{{ project.bucket }}
                    </div>
                    <div class="info-item mb-3">
                        <i class="fa fa-map-marker text-primary mr-2"></i><strong>COS区域：</strong>{{ project.region }}
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-footer bg-light d-flex justify-content-between">
            <a href="{% url 'bug_list' project_id=project.id %}" class="btn btn-primary px-4 py-2 shadow-sm">
                <i class="fa fa-bug mr-2"></i>BUG管理
            </a>
            {% if project.creator == request.user %}
                <button id="delete-project-btn" class="btn btn-danger px-4 py-2 shadow-sm" data-project-id="{{ project.id }}">
                    <i class="fa fa-trash mr-2"></i>删除项目
                </button>
            {% endif %}
        </div>
    </div>
</div>

<!-- 已经在布局模板中引入了jQuery，这里不再重复引入 -->
<script>
console.log('页面加载完成，准备绑定删除按钮事件');
$(document).ready(function() {
    console.log('jQuery ready，查找删除按钮');
    var deleteBtn = $('#delete-project-btn');
    console.log('删除按钮元素:', deleteBtn);
    if (deleteBtn.length) {
        console.log('找到删除按钮，绑定点击事件');
        deleteBtn.click(function() {
            console.log('删除按钮被点击');
            var projectId = $(this).data('project-id');
            console.log('项目ID:', projectId);
            if (confirm('确定要删除这个项目吗？删除后将无法恢复！')) {
                console.log('用户确认删除，发送AJAX请求');
                $.ajax({
                    url: '/project/delete/' + projectId + '/',
                    type: 'POST',
                    data: {
                        'csrfmiddlewaretoken': '{{ csrf_token }}'
                    },
                    beforeSend: function() {
                        console.log('即将发送请求到:', '/project/delete/' + projectId + '/');
                    },
                    success: function(response) {
                        console.log('请求成功，响应:', response);
                        if (response.status) {
                            alert('项目删除成功！');
                            window.location.href = '/project/list/';
                        } else {
                            alert('项目删除失败：' + response.msg);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('请求失败:', status, error);
                        console.error('响应内容:', xhr.responseText);
                        alert('请求失败，请稍后重试');
                    }
                });
            } else {
                console.log('用户取消删除');
            }
        });
    } else {
        console.log('未找到删除按钮，可能用户不是项目创建者');
    }
});
</script>
{% endblock %}